<template>
  <mxp-drag-button :offsetTop="`${offsetTop}px`" :location="location" width="56px" height="70px">
    <!-- #ifdef MP-TOUTIAO -->
    <button class="service-btn" open-type="im" :data-im-id="imID" @error="openError">
      <image style="width: 56px; height: 48px" src="/static/public/ico_customer_service.png" mode="scaleToFill"></image>
      <text class="text">联系客服</text>
    </button>
    <!-- #endif -->
  </mxp-drag-button>
</template>

<script lang="ts" setup>
  import MxpDragButton from '@/mxp-ui/mxp-drag-button/mxp-drag-button.vue';
  import type { $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import type { ButtonOnErrorEvent } from 'mxp-uni-types';
  import type { PropType } from 'vue';
  import { getAppInfo } from '@/config/mp-config';
  import type { TtMpConfig } from '@/config/mp/tt';
  import { useAppStore } from '@/pinia/app';
  const appStore = useAppStore();
  defineOptions({
    name: 'service-button',
  });
  defineProps({
    /** 当吸附时的距离屏幕顶部的边距 */
    offsetTop: { type: Number, default: 100 },
    /** 默认的位置坐标 注意是相对于左下角的坐标  [x,y]  */
    location: { type: Array as unknown as PropType<[$SizeUnitStr, $SizeUnitStr]>, default: () => ['15px', '45px'] },
  });
  const appInfo = getAppInfo() as TtMpConfig | undefined;
  // const imID = appInfo?.iMNumber;
  const imID = appStore.baseDictInfo?.CONTACT_CUSTOMER_ID;

  /** 打开客服失败 */
  function openError(e: ButtonOnErrorEvent) {
    console.error('打开客服失败====', e);
  }
</script>

<style lang="scss" scoped>
  .service-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 56px;
    height: 70px;
    padding: 0;
    background: rgba(0, 0, 0, 0);

    .text {
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 20px;
      margin-top: -6px;
      font-size: 10px;
      line-height: 10px;
      background: linear-gradient(275deg, #fdbf00 0%, #ffd80e 100%);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 35px;
    }

    &:after {
      border: none;
      border-color: transparent;
    }
  }
</style>
